<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>sound squirt pricing table</title>
<style type="text/css">
.cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;}
.cssguycomments p {font:normal 12px/18px verdana;}

a img {border:0;vertical-align:text-bottom;}
table {border-collapse:collapse;}
th.side {
	background: transparent url(i/bg_th_side.gif) no-repeat bottom left;
}
td.side {
	text-align:right;
	background: transparent url(i/bg_td_side.gif) no-repeat bottom left;
	width:180px;
	font:bold 12px/15px verdana;
	color:#6e6f37;
	padding-right:8px;
}

th {
	height:64px;
	border-right:1px solid #fff;
	vertical-align:bottom;
	color:#fff;
	font:normal 21px/27px arial;
	letter-spacing:2px;
	background:transparent url(i/bg_th.gif) no-repeat bottom left;
	}
td {
	text-align:center;
	background:transparent url(i/bg_td.gif) no-repeat bottom left;
	border-right:1px solid #fff;
	color:#fff;
	width:108px;
	height:40px;
	font:bold 12px/18px verdana;
}
td.on {background:transparent url(i/bg_td_on.gif) no-repeat bottom left;}
th.on {
	background:transparent url(i/bg_th_on.gif) no-repeat bottom left;
	padding-bottom:9px;
	width:148px;
}

tfoot td {
	background:transparent url(i/bg_foot_td.gif) no-repeat top left;
	height:64px;
	vertical-align:top;
	padding-top:8px;
}
tfoot td.on {
	background:transparent url(i/bg_foot_td_on.gif) no-repeat top left;
	padding-top:16px;
}
tfoot td.side {background: transparent url(i/bg_foot_td_side.gif) no-repeat top left;}

#formcontainer {
	width:443px;
	height:239px;
	background:transparent url(i/bg_form.gif) no-repeat top left;
	position:absolute;
	top:24px;
	left:341px;
}
#formcontainer form {
	padding:8px 10px;
	margin:0;
}
#formcontainer h2 {
	margin:0;
	padding:0 0 14px 0;
	font:bold 21px/27px arial;
	color:#fff;
}
#formcontainer fieldset {
	border:none;
	padding:0;
}
#formcontainer label {
	display:block;
	float:left;
	font:bold 12px/18px verdana;
	color:#fff;
	padding-bottom:12px;
}
#formcontainer label.email {
	width:350px;
}
#formcontainer label.email input {
	width:340px;
}
#formcontainer label.password {
	clear:left;
	padding-right:40px;
}
#formcontainer label.password input,
#formcontainer label.retype input {
	width:150px;
}
#formcontainer fieldset.buttons {
	padding-top:10px;
	clear:left;
}
#prices {
	position:relative;
}

</style>

<!-- because ie is a little different with its positioning... -->
<!--[if lte IE 8]>
<style type="text/css">
#formcontainer {
	top:34px;
}
</style>
<![endif]-->


<script type="text/javascript">
/*
	For functions getElementsByClassName, addClassName, and removeClassName
	Copyright Robert Nyman, http://www.robertnyman.com
	Free to use if this text is included
*/
function getElementsByClassName(className, tag, elm){
	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
	var tag = tag || "*";
	var elm = elm || document;
	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
	var returnElements = [];
	var current;
	var length = elements.length;
	for(var i=0; i<length; i++){
		current = elements[i];
		if(testClass.test(current.className)){
			returnElements.push(current);
		}
	}
	return returnElements;
}

function addClassName(elm, className){
    var currentClass = elm.className;
    if(!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i").test(currentClass)){
        elm.className = currentClass + ((currentClass.length > 0)? " " : "") + className;
    }
    return elm.className;
}

function removeClassName(elm, className){
    var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i");
    elm.className = elm.className.replace(classToRemove, "").replace(/^\s+|\s+$/g, "");
    return elm.className;
}

function hasClass(el, c) {
  if (!el || !el.className.length) return;
  var bits = el.className.split(' '), has = false;
  for (var j = 0; j < bits.length; j++) if (bits[j] === c) has = true;
  return has;
}

function activateThisColumn(column) {
  var table = document.getElementById('pricetable');
  var form = document.getElementById('formcontainer');

  // first, remove the 'on' class from all other th's
  var ths = table.getElementsByTagName('th');
  for (var g=0; g<ths.length; g++) {
    removeClassName(ths[g], 'on');
    if (!hasClass(ths[g],'side')) {
      ths[g].style.display = 'none';
    }
  }
  // then, remove the 'on' class from all other td's
  var tds = table.getElementsByTagName('td');
  for (var m=0; m<tds.length; m++) {
    removeClassName(tds[m], 'on');
    if (!hasClass(tds[m],'side')) {
      tds[m].style.display = 'none';
    }
  }

  // now, add the class 'on' to the selected th
  var newths = getElementsByClassName(column, 'th', table);
  for (var h=0; h<newths.length; h++) {
    addClassName(newths[h], 'on');
    newths[h].style.display = '';
    // not all browsers like display = 'block' for cells
  }
    // and finally, add the class 'on' to the selected td
  var newtds = getElementsByClassName(column, 'td', table);
  for (var i=0; i<newtds.length; i++) {
    addClassName(newtds[i], 'on');
    newtds[i].style.display = '';
    // not all browsers like display = 'block' for cells
  }
  // show the form!
  form.style.display = 'block';
}


</script>

</head>
<body>

<div class="cssguycomments">
<p>A form is revealed when requested.  The form container is set inline to display:none, which is ok, because if someone has javascript off, the "choose" button in the table has a real destination in its href attribute.</p>
</div>

<div id="prices">
<div id="formcontainer" style="display:none;">
	<form action="#">
		<h2>Get an account!</h2>
		<fieldset>
			<label for="email" class="email">
				Email<br />
				<input id="email" type="text" />
			</label>
			<label for="crazypassword" class="password">
				Password<br />
				<input id="crazypassword" type="password" />
			</label>
			<label for="retype" class="retype">
				Retype Password<br />
				<input id="retype" type="password" />
			</label>
		</fieldset>
		<fieldset class="buttons">
			<input
				type="image"
				alt="Cancel"
				src="i/button_cancel.gif" />
			<input
				type="image"
				alt="Submit"
				src="i/button_submit.gif" />
		</fieldset>
	</form>
</div>

<table id="pricetable">
	<thead>
		<tr>
			<th class="side">&nbsp;</th>
			<th class="choiceA">$1000</th>
			<th class="choiceB">$100</th>
			<th class="choiceC on">$10</th>
			<th class="choiceD">$1</th>
			<th class="choiceE">Free</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td class="side">&nbsp;</td>
			<td class="choiceA"><a href="signUpChoiceA.html" onclick="activateThisColumn('choiceA');return false;"><img src="i/choose.gif" alt="Choose" /></a></td>
			<td class="choiceB"><a href="signUpChoiceB.html" onclick="activateThisColumn('choiceB');return false;"><img src="i/choose.gif" alt="Choose" /></a></td>
			<td class="choiceC on"><a href="signUpChoiceC.html" onclick="activateThisColumn('choiceC');return false;"><img src="i/choose.gif" alt="Choose" /></a></td>
			<td class="choiceD"><a href="signUpChoiceD.html" onclick="activateThisColumn('choiceD');return false;"><img src="i/choose.gif" alt="Choose" /></a></td>
			<td class="choiceE"><a href="signUpChoiceE.html" onclick="activateThisColumn('choiceE');return false;"><img src="i/choose.gif" alt="Choose" /></a></td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td class="side">Number of quarters</td>
			<td class="choiceA">4,000</td>
			<td class="choiceB">400</td>
			<td class="choiceC on">40</td>
			<td class="choiceD">4</td>
			<td class="choiceE">None</td>
		</tr>
		<tr>
			<td class="side">Number of zeros</td>
			<td class="choiceA">3 zeros</td>
			<td class="choiceB">2 zeros</td>
			<td class="choiceC on">1 zero</td>
			<td class="choiceD">No zeros</td>
			<td class="choiceE">None</td>
		</tr>
		<tr>
			<td class="side">Checks on this row</td>
			<td class="choiceA"><img src="i/check.png" alt="yes" /></td>
			<td class="choiceB"><img src="i/check.png" alt="yes" /></td>
			<td class="choiceC on"><img src="i/check.png" alt="yes" /></td>
			<td class="choiceD"><img src="i/check.png" alt="yes" /></td>
			<td class="choiceE">&nbsp;</td>
		</tr>
		<tr>
			<td class="side">Checks on another row</td>
			<td class="choiceA"><img src="i/check.png" alt="yes" /></td>
			<td class="choiceB"><img src="i/check.png" alt="yes" /></td>
			<td class="choiceC on">&nbsp;</td>
			<td class="choiceD">&nbsp;</td>
			<td class="choiceE">&nbsp;</td>
		</tr>
	</tbody>
</table>
</div>

</body>
</html>
